<template>
  <el-config-provider :locale="locale">
    <div id="app" :class="{ dark: isDark }">
      <router-view />
    </div>
  </el-config-provider>
</template>

<script setup lang="ts">
import { ref } from "vue";
import zhCn from "element-plus/dist/locale/zh-cn.mjs";
import { useThemeStore } from "@/stores/theme";

const locale = zhCn;
const themeStore = useThemeStore();
const isDark = ref(themeStore.isDark);

// 监听主题变化
themeStore.$subscribe((mutation, state) => {
  isDark.value = state.isDark;
  if (state.isDark) {
    document.documentElement.classList.add("dark");
  } else {
    document.documentElement.classList.remove("dark");
  }
});
</script>

<style lang="scss">
#app {
  min-height: 100vh;
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: all 0.3s ease;
}

// 滚动条样式
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--el-bg-color-page);
}

::-webkit-scrollbar-thumb {
  background: var(--el-border-color-light);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--el-border-color);
}
</style>
